﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model YaAppoint.Web.Pages.Users.IndexModel
@inject IPageLayout PageLayout
@{
    PageLayout.Content.Title = "用户管理";
}
<div class="content-container">
    <div id="app">
        <el-row>
            <el-col :span="23">
                <div class="grid-content bg-purple-dark">
                    <el-input v-model.trim="filterName" placeholder="用户名" size="small" style="width:300px;" clearable></el-input>
                    <el-button type="primary" v-on:click="loadTableData" icon="el-icon-search" size="small">搜索</el-button>
                    <el-button v-on:click="showCreate" icon="el-icon-plus" size="small" v-if="createDepartUserPermission">新建</el-button>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="loadTableData" icon="el-icon-refresh" size="small"></el-button>
                </div>
            </el-col>
        </el-row>
        <hr class="line-gray" />
        <div class="table-container">
            <div class="title-container">
                <span>{{department?department.name:''}}</span>
            </div>
            <el-table :data="tableData" class="el-table" ref="depUserTable" v-show="tableShow" v-on:selection-change="depUserSelectionChange">
                <el-table-column type="selection" width="80">
                </el-table-column>
                <el-table-column type="index" width="120" label="编号">

                </el-table-column>
                <el-table-column label="用户名" width="120" property="userName">

                </el-table-column>
                <el-table-column label="姓名" width="120" property="name">

                </el-table-column>
                <el-table-column label="电话" width="120" property="phoneNumber">

                </el-table-column>
                <el-table-column label="编码" width="120" property="code">

                </el-table-column>
                <el-table-column label="外码" width="120" property="outerCode">

                </el-table-column>
                <el-table-column label="工号" width="120" property="jobNumber">

                </el-table-column>
                <el-table-column label="活动" width="120" property="type">
                    <template slot-scope="scope">
                        <el-checkbox :checked="scope.row.isActive" disabled></el-checkbox>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-show="tableShow"
                           v-on:size-change="depPageSizeChange"
                           v-on:current-change="depCurrentPageChange"
                           :current-page="depCurrentPage"
                           :page-sizes="[10, 15, 20, 30,40,50,100]"
                           :page-size="depPageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="depUserTotal">
            </el-pagination>
            <div v-show="!tableShow" class="no-department">
                <span>系统中还没配置任何科室！！</span>
            </div>
        </div>

        <!-- 创建新用户-->
        <el-dialog title="新用户" :visible.sync="createDialogVisible" width="600px" v-on:close="resetCreateForm" :close-on-click-modal="false">
            <el-form :model="user" :label-width="formLabelWidth" ref="creatUserForm" :rules="rules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark" property="name">
                            <el-form-item label="用户名" prop="userName">
                                <el-input v-model.trim="user.userName" size="small" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark" property="name">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model.trim="user.name" size="small" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model.trim="user.email" size="small" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="手机号">
                                <el-input v-model.trim="user.phoneNumber" size="small" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="外部编码" prop="outerCode">
                                <el-input v-model.trim="user.outerCode" size="small" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="身份证号" prop="idCardNumber">
                                <el-input v-model.trim="user.idCardNumber" type="number" size="small" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="工号">
                                <el-input v-model.trim="user.jobNumber" size="small" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="saveUserToDeparment" size="small">保存</el-button>
                <el-button v-on:click="resetCreateForm" size="small">取 消</el-button>
            </div>
        </el-dialog>

        <!--编辑用户权限-->
        <el-dialog :title="权限-18914894368" :visible.sync="permisionDialogVisible" width="600px" v-on:close="resetPermissionDialog" :close-on-click-modal="false">
            <el-row>
                <el-col :span="23">
                    <div class="grid-content bg-purple-dark">
                        <el-input v-model.trim="filterName" placeholder="" size="small" style="width:300px;" clearable></el-input>
                        <el-button type="primary" v-on:click="loadTableData" icon="el-icon-search" size="small">搜索</el-button>
                    </div>
                </el-col>
                <el-col :span="1">
                    <el-checkbox v-model="checked">授予所有权限</el-checkbox>
                </el-col>
            </el-row>
            <el-row>
                <div class="body-container">
                    <div class="group-list-container">
                       <ul class="group-list" id="PermissionTabs">
                           <li v-for="item in permissinList" :accesskey="item.id" :id="item.id" :ref="item.id" v-on:click="groupClicked(item.id)">

                           </li>
                       </ul>
                    </div>
                    <div class="permission-tree">
                    </div>
                </div>
            </el-row>
        </el-dialog>
    </div>
</div>
